@import '../../../../styles/variable.less';
@import '../../../../styles/mixins.less';
.detailsItem {
  margin-top: 50px;
}

.list {
  position: relative;
  border: 1px solid rgb(236, 240, 241);
}

.item {
  position: relative;
  padding: 30px 20px 30px 25px;
  color: #333;
  border-top: 1px solid rgb(236, 240, 241);
  &:first-child {
    border-top: none;
  }
}

.title {
  font-size: 24px;
}

.copy {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

.url {
  font-size: 16px;
  word-wrap: break-word;
}

.icon {
  margin-right: .5*@gutter;
  color: @primary-color;
}

.copyButton {
  display: inline-block;
  margin-left: 2*@gutter;
  padding: .5*@gutter @gutter;
  cursor: pointer;
  border: 1px solid rgb(236, 240, 241);
  border-top: none;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  &:hover {
    color: #fff;
    background-color: @primary-color;
  }
}

@media (min-width: @md) {
  .copy {
    display: block;
  }
  .list::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    display: block;
    width: 2px;
    content: '';
    background-color: @primary-color;
  }
  .title {
    transform: translateX(-40px);
  }
}